<div>

  <form clrForm #settingForm="ngForm">
    <div *ngIf="settings">
      <clr-input-container>
        <label>本机IP</label>
        <input clrInput [(ngModel)]="settings['local_hostname']" name="local_hostname" size=45 required/>
        <clr-control-helper>必填,请填写 Kubeoperator 本机的IPV4地址</clr-control-helper>
      </clr-input-container>
      <clr-input-container>
        <label>域名后缀</label>
        <input clrInput [(ngModel)]="settings['domain_suffix']" pattern="{{domain_pattern}}" name="domain_suffix" required size=45/>
        <clr-control-helper>必填,用于生成 Node 名称以及应用域名</clr-control-helper>
      </clr-input-container>
      <clr-input-container>
        <label>NTP Server</label>
        <input clrInput [(ngModel)]="settings['ntp_server']" name="ntp_server" size=45/>
        <clr-control-helper>选填,为集群提供对时服务</clr-control-helper>
      </clr-input-container>
    </div>
  </form>
  <button class="btn btn-info-outline" (click)="onSubmit()" [disabled]="settingForm.invalid">保存</button>
  <button class="btn btn-info-outline" (click)="onCancel()">取消</button>
</div>
